<template>
  <div class="app-container">
    <div class="app-title">
      <span>预警设置</span>
    </div>
    <div class="filter-container">
      <el-row>
        <el-form
          ref="dataForm"
          :rules="dataFormRules"
          :model="formData"
          label-position="right"
          label-width="100px"
          size="small"
        >
          <el-row />
          <div class="contentBorder" :style="'height : '+tableHeight+'px'">
                <div :style="'padding-top: '+(tableHeight*0.3) +'px'">
            
              <el-row>
                <el-col :span="12" class="left">
                  <span style="font-size: 20px">系统提前预警月份数（从当前已发月份开始计算，不足按剩余处理）：</span>
                </el-col>
                <el-col :span="4">
                  <el-input-number v-model="formData.warnMonth" :min="0" :max="12" />
                </el-col>
                <el-col :span="2">
                  <span style="font-size: 20px">个月</span>
                </el-col>
              </el-row>
                <el-row>
              <el-col :span="12" class="left"  style="margin-left:-17px;">
                <span style="font-size: 20px">指标校验是否满足预警月份（选择系统提前预警月份数校验）：</span>
              </el-col>
              <el-button
                size="small"
                class="filter-item"
                style="margin-left:-270px;"
                type="primary"
                :loading="checkWarnMonthLoading"
                @click="checkWarnMonth"
              >
                检测
              </el-button>
              </el-row>
              <el-button
                size="small"
                class="filter-item move"
                :style="'margin-left: 10px ;margin-top: '+(tableHeight*0.3) +'px'"
                type="primary"
                :loading="toUpdateLoading"
                @click="toUpdate"
              >
                保存
              </el-button>
            </div>
          </div>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  getSalaryWarnMonth,
  updateSalaryWarnMonth,
  checkWarnMonthLoading
} from '@/api/salaryWarnMonth/salaryWarnMonth'

export default {
  name: 'WarningSet',
  data() {
    return {
      tableHeight: null,
      listLoading: true,
      toUpdateLoading: false,
      checkWarnMonthLoading: false,
      dataFormRules: {
        warnMonth: [{ required: true, message: '不能为空值', trigger: 'blur' }]
      },
      formData: {
        id: '',
        warnMonth: '',
      }
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    this.getTbHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTbHeight)
  },
  methods: {
    // 获取table高度的方法
    getTbHeight() {
      this.tableHeight = window.innerHeight - 120
    },
    getList() {
      this.listLoading = true
      getSalaryWarnMonth().then(response => {
        this.formData = response.data

        this.listLoading = false
      })
    },
    handleFilter() {
      this.getList()
    },
    toUpdate() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.toUpdateLoading = true
          updateSalaryWarnMonth(this.formData).then(response => {
            this.dialogFormVisible = false
            this.$message({
              showClose: true,
              message: '保存成功',
              type: 'success',
              duration: 4000
            })
            this.toUpdateLoading = false
            this.handleFilter()
          })
        }
      })
    },
    checkWarnMonth(){
        this.checkWarnMonthLoading = true
        if(this.formData.warnMonth==0){
            this.$message({
                  showClose: true,
                  dangerouslyUseHTMLString: true,
                  message: '检验完成！无失败单位',
                  type: 'success',
                  duration: 2000
                })
                this.checkWarnMonthLoading = false
                return
        }
          checkWarnMonthLoading(this.formData).then(response => {
            this.dialogFormVisible = false
             if (response && response.rscode === '100000') {
                if(response.data.request){
                this.$message({
                  showClose: true,
                  dangerouslyUseHTMLString: true,
                  message: response.data.request,
                  type: 'warning',
                  duration: 0,
                  customClass:'persdsd',
                })
              }else{
                this.$message({
                  showClose: true,
                  dangerouslyUseHTMLString: true,
                  message: '检验完成！无失败单位',
                  type: 'success',
                  duration: 2000
                })
              }
             }
            this.checkWarnMonthLoading = false
          })
    }
  }
}
</script>
<style lang="scss">
.persdsd{
  padding-bottom: 0 !important;
  border: none !important;
  margin-top: 70px;
  .el-message__content{
    max-width : 750px;
    max-height : 550px;
    overflow-y:auto
}
}
// .el-message--warning{
//    max-width : 800px;
//      max-height : 500px;
//     overflow-y:auto
// }
// .el-message__content{
//    max-width : 620px;
//      max-height : 550px;
//     overflow-y:auto
// }
</style>
<style scoped lang="scss">

.left {
  margin-left: 100px;
}

.move {
  margin-top: 50px;
  margin-right: 50px;
}

.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #dcdfe6;
}

.contentBorder {
  //box-shadow: 2px 2px 5px #e5e6eb;
  width: 90%;
  border: #a9eaa9 solid 1px;
  text-align: center;
  margin-left: 3%;

  .el-row:nth-child(1) {
    padding-top: 30px;

    .el-col:nth-child(1) {
      text-align: center;
    }

    .el-col:nth-child(3) {
      .el-input {
        margin-top: -10px;
      }
    }

    .el-col:nth-child(4) {
      text-align: right;
    }
  }

  .el-row:nth-child(2) {
    padding-top: 20px;
    padding-bottom: 30px;

    .el-col:nth-child(1) {
      text-align: right;
    }
  }

  .el-row:nth-child(3) {
    padding-top: 50px;
    padding-bottom: 30px;
    border-top: rgba(121, 121, 121, 1) solid 1px;

    .el-col:nth-child(1) {
      text-align: center;
    }

    .el-col:nth-child(3) {
      .el-input {
        margin-top: -10px;
        padding: 0px 5px 0px 10px;
      }
    }

    .el-col:nth-child(4) {
      text-align: right;
    }

  }
}
</style>
